<template>
  <div class="mg16 flex">
    <apply-left></apply-left>
    <div class="apply_right">
      <div class="apply_root">
        <i class="el-icon-warning" style="color: #0c7ff2; font-size: 14px"></i>
        您的A类会议的剩余权限：技术展示： <span>5</span> 个
        报告赞助：<span>5</span>个 金牌赞助：<span>5</span>个
        钻石赞助：<span>5</span>个
      </div>
      <div class="apply_meet_info">
        <h4>会议详情</h4>
        <div class="meet_content">
          <span class="realitive">
            <img
              src="https://img1.17img.cn/17img/images/202301/webinar/778a2a82-cf74-445a-88c1-0d8c37080208.jpg"
              class="img"
              alt=""
            />
            <!-- <span class="mt_a">A类会议</span> -->
            <span class="mt_b">B类会议</span>
            <!-- <span class="mt_c">C类会议</span> -->
          </span>
          <div class="content_right">
            <div class="title">
              天津分析测试新技术与前沿应用高端论坛——
              环境新污染物分析与检测创新技术论坛
            </div>
            <p class="time">02月22日 09:00—18:00</p>
            <p class="content">
              离子色谱技术因其快速方便、灵敏度高、选择性好、可同时分析多种离子化合物以及分离柱的稳定性好、容量高等特点，被广泛应用在环境、化工、能源、生物、医药、食品、化妆品等领域，在超高/超低离子强度样品分析中发挥着重要作用；同时，ICP-MS、AFS的联用技术等
            </p>
          </div>
        </div>
      </div>
      <div class="apply_body">
        <steps-demo :stepsList="stepsList"></steps-demo>
        <div class="body">
          <div class="top">
            <span
              ><i class="el-icon-warning" style="font-size: 14px;color: #0c7ff2;"></i>
              已申请过的会议主题，依然可以进行申请！</span
            >
            <span class="mn_a">查看我赞助的会议：0个</span>
          </div>
          <el-table
            v-loading="loading"
            :data="DataTable"
            style="width: 100%"
            max-height="620"
            :default-sort="{ prop: 'date', order: 'descending' }"
            @sort-change="sortChange"
          >
            <el-table-column
              prop="title"
              label="会议的主题"
              min-width="200"
              align="left"
            >
            </el-table-column>
            <el-table-column
              prop="sampleName"
              label="赞助类型"
              min-width="120"
              align="left"
            >
            </el-table-column>
            <el-table-column
              prop="lyState"
              label="会议赞助商"
              min-width="330"
              align="left"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import applyLeft from "./compontents/left.vue";
import stepsDemo from "./compontents/Steps.vue";
export default {
  components: {
    applyLeft,
    stepsDemo,
  },
  data() {
    return {
      DataTable: [],
      stepsList:['选择赞助的主题','选择赞助的方式','提交赞助申请']
    };
  },
  methods: {
    sortChange() {},
  },
};
</script>

<style lang="scss" scoped>
.apply_right {
  margin-left: 16px;
  .apply_root {
    // @include flex(row, center, flex-start);
    background: #e7f2fe;
    border-radius: 2px 2px 2px 2px;
    border: 1px solid #0c7ff2;
    padding: 16px;
    font-size: 14px;
    color: #4f5862;
    line-height: 16px;
    margin-bottom: 16px;
    span {
      color: #0c7ff2;
    }
  }
  .apply_meet_info {
    padding: 13px 16px;
    background: #fff;
    h4 {
      font-size: 14px;
      font-weight: 600;
      color: #202933;
      line-height: 16px;
      margin-bottom: 16px;
    }
    .meet_content {
      @include flex(row, flex-start, flex-start);
      .mt_b {
        font-size: 13px;
        font-weight: 600;
        color: #ffffff;
        line-height: 16px;
        padding: 4px 8px;
        background: linear-gradient(90deg, #ffbe31 0%, #ffe485 100%);
        border-radius: 4px 0px 4px 0px;
        position: absolute;
        top: 0;
        left: 0;
      }
      .img {
        width: 177px;
        height: 126px;
        border-radius: 4px 4px 4px 4px;
        display: inline-block;
        margin-right: 24px;
      }
      .content_right {
        .title {
          font-size: 16px;
          font-weight: 600;
          color: #000000;
          line-height: 24px;
          margin-bottom: 13px;
        }
        .time {
          font-size: 16px;
          font-weight: 600;
          color: #4f5862;
          line-height: 19px;
          margin-bottom: 22px;
        }
        .content {
          font-size: 12px;
          color: #7e8790;
          line-height: 24px;
          height: 48px;
        }
      }
    }
  }
  .apply_body {
    background: #fff;
    margin-top: 16px;
    .body{
        border-top: 1px solid #F0F3F7;
        padding: 20px;
        .top {
      padding-bottom: 19px;
      @include flex(row, center, space-between);
      .mn_a{
        display: inline-block;
        color: #0c7ff2;
        text-decoration:underline;
        cursor: pointer;
      }
    }
    }

  }
}
</style>